<template>
	<view class="content">
		<view class="group">
			<view class="group_1">
				<text @click="changeCancle(false)">取消</text>
				<text :class="{ active: canvasStatus === 0 }" @click="changeCanvasType(0)">画笔</text>
				<text :class="{ active: canvasStatus === 1 }" @click="changeCanvasType(1)">文字</text>
				<text :class="{ active: canvasStatus === 2 }" @click="changeCanvasType(2)">图案</text>
				<text :class="{ active: canvasStatus === 3 }" @click="changeCanvasType(3)">橡皮擦</text>
				<text @click="changeBishuaShow()">撤回</text>
				<text @click="changeCancle(true)">完成</text>
			</view>
			<view class="group_2">
				<view v-for="(item, index) in colorsData" :key="index" :style="{ backgroundColor: `rgb(${item.color})` }" @click="selectColor(item, index)">
					<uni-icons v-if="item.active" class="text" type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
				</view>
			</view>
			<view class="group_3" v-if="bishuaShow">
				<view class="">普通笔刷</view>
				<view class="group_3_item">
					<text
						v-for="(item, index) in bishuaData1"
						:key="index"
						:class="{ active: item.active }"
						:style="{ fontWeight: item.weight, opacity: item.opacity, fontSize: item.size + 'rpx' }"
						@click="selectBishua(item, index)"
					>
						~
					</text>
				</view>
				<view class="">荧光笔刷</view>
				<view class="group_3_item">
					<text
						v-for="(item, index) in bishuaData2"
						:key="index"
						:class="{ active: item.active }"
						:style="{ fontWeight: item.weight, opacity: item.opacity, fontSize: item.size + 'rpx' }"
						@click="selectBishua(item, index + 5)"
					>
						~
					</text>
				</view>
			</view>
			<view class="group_4" v-if="textStatus">
				<text class="group_4_label">字体：</text>
				<view class="group_4_view" :style="{ fontFamily: fontFamily }" @click="handleFontFace">{{ fontFamilyName }}</view>
				<text class="group_4_label">大小：</text>
				<slider v-model="fontsize" @change="sliderChange" :min="10" :max="40" :step="1" :block-size="20" show-value />
				<view class="group_4_1" v-if="faceStatus">
					<view class="" v-for="(item, index) in fontfaceData" :key="index" @click="handleSelectFont(item, index)">
						<text :style="{ fontFamily: item.type }">{{ item.name }}</text>
						<uni-icons v-if="item.active" type="checkmarkempty" size="20"></uni-icons>
					</view>
				</view>
			</view>
			<view class="group_5" v-if="patternStatus">
				<text v-for="(item, index) in patternData" :key="index" :class="{ active: item.active }" @click="handlePattern(item, index)">{{ item.name }}</text>
			</view>
		</view>
		<view class="group1">
			<image class="img" :style="{ width: width + 'px', height: height + 'px' }" :src="bgImg" mode="" @load="imageLoad"></image>

			<movable-area :style="{ width: width + 'px', height: height + 'px' }">
				<movable-view
					class="textbox"
					direction="all"
					:disabled="movableviewStatus"
					:x="item.x"
					:y="item.y"
					out-of-bounds
					@change.stop="handlemovable($event, index)"
					v-for="(item, index) in textData"
					:key="index"
					:style="{
						width: item.w + 'px',
						height: item.h + 'px',
						border: !movableviewStatus ? '1rpx solid rgba(240, 173, 78, 0.5)' : 'none',
						backgroundColor: !movableviewStatus ? 'rgba(240, 173, 78, 0.5)' : '',
						left: item.y,
						top: item.x
					}"
				>
					<textarea
						placeholder="请输入"
						v-model="item.text"
						:disabled="movableviewStatus"
						:style="{ color: item.color, fontSize: item.size + 'px', fontFamily: item.family, width: item.w + 'px', height: item.h + 'px' }"
					></textarea>
					<uni-icons v-if="!movableviewStatus" class="close" type="clear" size="30" @click="handleDelText(item, index)"></uni-icons>
					<!-- <uni-icons class="tuizhuai" type="smallcircle-filled" size="30" @click="handleChangeText(item, index)"></uni-icons> -->
				</movable-view>

				<canvas
					:style="{ width: width + 'px', height: height + 'px', zIndex: canvasStatus == 1 ? 3 : 5 }"
					type="2d"
					:ref="canvasId"
					class="canvasbox"
					:canvas-id="canvasId"
					:id="canvasId"
					:disable-scroll="true"
					@touchstart="touchstart"
					@touchmove="touchmove"
					@touchend="touchend"
				></canvas>
			</movable-area>

			<canvas class="img1" :canvas-id="canvasId + '1'" :style="{ width: width + 'px', height: height + 'px' }" :id="canvasId + '1'"></canvas>
		</view>
	</view>
</template>

<script>
import { pathToBase64, base64ToPath } from 'image-tools';
export default {
	name: 'canvasgraffiti',
	props: {
		// 画布ID
		canvasId: {
			type: String,
			default: 'myCanvas'
		},
		// 背景图
		bgImg: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			width: 0,
			height: 0,
			// 屏幕宽度
			deviceWidth: 0,
			// 状态 0:自由画笔，1:文字，2:图案，3:橡皮擦
			canvasStatus: 0,
			// 线条宽度
			lineWidth: 3,
			ctx: null,
			ctx1: null,
			startX: 0, // 前一个绘制节点X轴
			startY: 0, // 前一个绘制节点Y轴
			// 颜色数据
			colorsData: [
				{
					color: '255,0,0',
					active: true
				},
				{
					color: '0,255,0',
					active: false
				},
				{
					color: '0,0,255',
					active: false
				},
				{
					color: '255,255,255',
					active: false
				},
				{
					color: '0,0,0',
					active: false
				},
				{
					color: '0,108,230',
					active: false
				},
				{
					color: '239,270,3',
					active: false
				}
			],
			// 笔刷显示状态
			bishuaShow: false,
			//普通笔刷
			bishuaData: [
				{
					bishuawidth: 6,
					weight: 300,
					active: true,
					opacity: 1,
					size: 30
				},
				{
					bishuawidth: 8,
					weight: 400,
					active: false,
					opacity: 1,
					size: 34
				},
				{
					bishuawidth: 10,
					weight: 500,
					active: false,
					opacity: 1,
					size: 38
				},
				{
					bishuawidth: 12,
					weight: 600,
					active: false,
					opacity: 1,
					size: 42
				},
				{
					bishuawidth: 18,
					weight: 700,
					active: false,
					opacity: 1,
					size: 44
				},
				{
					bishuawidth: 6,
					weight: 300,
					active: false,
					opacity: 0.5,
					size: 30
				},
				{
					bishuawidth: 8,
					weight: 400,
					active: false,
					opacity: 0.5,
					size: 34
				},
				{
					bishuawidth: 10,
					weight: 500,
					active: false,
					opacity: 0.5,
					size: 38
				},
				{
					bishuawidth: 12,
					weight: 600,
					active: false,
					opacity: 0.5,
					size: 42
				},
				{
					bishuawidth: 18,
					weight: 700,
					active: false,
					opacity: 0.5,
					size: 44
				}
			],

			// 文字显示状态
			textStatus: false,
			// 文字数据
			textData: [],
			// 当前文字下标
			textindex: 0,
			// 字体大小
			fontsize: 10,
			// 字体列表状态
			faceStatus: false,
			// 字体数据
			fontfaceData: [
				{
					name: '默认字体',
					type: 'sans-serif',
					active: true
				},
				{
					name: '黑体',
					type: 'heiti',
					active: false
				},
				{
					name: '楷体',
					type: 'kaiti',
					active: false
				},
				{
					name: '优设标题黑',
					type: 'YouSheBiaoTiHei',
					active: false
				}
			],
			// 改变文字框大小状态
			textchangesize: false,

			// 图案状态
			patternStatus: false,
			// 图案数据
			patternData: [
				{
					name: '圆圈',
					type: 'circle',
					active: true
				},
				{
					name: '矩形',
					type: 'rect',
					active: false
				},
				{
					name: '箭头',
					type: 'arrow',
					active: false
				},
				{
					name: '大于号',
					type: 'bigger',
					active: false
				},
				{
					name: '半矩形',
					type: 'missingrect',
					active: false
				},
				{
					name: '圆弧',
					type: 'arc',
					active: false
				}
			],

			// 需要画图的轨迹
			drawPoint: [],
			// 移除的轨迹
			removePoint: []
		};
	},
	computed: {
		/**
		 * 线条颜色
		 */
		lineColor() {
			return this.colorsData.filter((color) => color.active)[0].color;
		},
		/**
		 * 普通笔刷，bishuaData的前5个数据
		 */
		bishuaData1() {
			return this.bishuaData.slice(0, 5);
		},
		/**
		 * 荧光笔刷，bishuaData的后5个数据
		 */
		bishuaData2() {
			return this.bishuaData.slice(5, 10);
		},
		/**
		 * 自由画笔宽度
		 */
		freeLineWidth() {
			return this.bishuaData.filter((item) => item.active)[0].bishuawidth;
		},
		/**
		 * 自由画笔透明度
		 */
		freeLineOpacity() {
			return this.bishuaData.filter((item) => item.active)[0].opacity;
		},
		/**
		 * 移动文字的移动状态
		 */
		movableviewStatus() {
			if (!this.textStatus && !this.textchangesize) {
				return true;
			}
			if (!this.textStatus && this.textchangesize) {
				return true;
			}
			if (this.textStatus && !this.textchangesize) {
				return false;
			}
			if (this.textStatus && this.textchangesize) {
				return true;
			}
		},
		/**
		 * 当前选中的字体
		 */
		fontFamily() {
			return this.fontfaceData.filter((item) => item.active)[0].type;
		},
		fontFamilyName() {
			return this.fontfaceData.filter((item) => item.active)[0].name;
		},
		/**
		 * 绘制图案类型
		 */
		patternType() {
			return this.patternData.filter((item) => item.active)[0].type;
		}
	},
	mounted() {
		this.deviceWidth = uni.getSystemInfoSync().windowWidth;
	},
	methods: {
		// 图片加载
		imageLoad(e) {
			let imageWidth = e.target.width;
			let imageHeight = e.target.height;
			let scale = this.deviceWidth / imageWidth;
			this.width = imageWidth * scale;
			this.height = imageHeight * scale;

			this.$nextTick(() => {
				this.ctx = uni.createCanvasContext(this.canvasId);
				// 让线条圆润
				// this.ctx.setLineCap('round');
				this.ctx.setLineJoin('round');
				this.ctx.setMiterLimit(4);

				this.ctx1 = uni.createCanvasContext(this.canvasId + '1');
				this.ctx1.drawImage(this.bgImg, 0, 0, this.width, this.height);
				this.ctx1.draw();
			});
		},

		// 开始接触事件
		touchstart(e) {
			console.log('touchstart', e);
			const x = e.touches[0].x;
			const y = e.touches[0].y;

			this.startX = x;
			this.startY = y;

			switch (this.canvasStatus) {
				case 0:
					// console.log('自由画笔', this.drawPoint.length);
					this.drawPoint.push({
						shape: 'curve',
						lineColor: `rgba(${this.lineColor},${this.freeLineOpacity})`,
						lineWidth: this.freeLineWidth,
						points: [
							{
								x,
								y
							}
						]
					});
					this.ctx.setStrokeStyle(`rgba(${this.lineColor},${this.freeLineOpacity})`);
					this.ctx.setLineWidth(this.freeLineWidth);
					this.ctx.beginPath();
					break;
				case 1:
					console.log('文字');
					if (this.textData.length != 0 && !this.textData[this.textData.length - 1].text) {
						console.log('只有一个');
					} else {
						console.log(this.textchangesize, '一个都没有，或者上一个存在参数');
						if (!this.textchangesize) {
							this.textData.push({
								x: x,
								y: y,
								text: '',
								size: this.fontsize,
								color: `rgba(${this.lineColor},1)`,
								family: this.fontFamily,
								w: 200,
								h: 100
							});
						}
					}
					break;
				case 2:
					console.log('图案');
					this.drawPoint.push({
						shape: this.patternType,
						lineColor: `rgba(${this.lineColor},1)`,
						lineWidth: this.lineWidth,
						points: [
							{
								x,
								y
							}
						]
					});
					break;
				default:
					console.log('橡皮擦');
					this.drawPoint.push({
						shape: 'erase',
						lineColor: '',
						lineWidth: '',
						points: [
							{
								x,
								y
							}
						]
					});
					break;
			}
		},

		// 滑动事件
		touchmove(e) {
			console.log('touchmove', e);
			const x = e.touches[0].x;
			const y = e.touches[0].y;
			switch (this.canvasStatus) {
				case 0:
					console.log('自由画笔');
					this.drawPoint[this.drawPoint.length - 1].points.push({
						x,
						y
					});
					this.freeDraw(x, y);
					this.ctx.draw(true);
					break;
				case 1:
					if (this.textchangesize) {
						this.textData[this.textindex].w = x - this.textData[this.textindex].x;
						this.textData[this.textindex].h = y - this.textData[this.textindex].y;
					}
					break;
				case 2:
					console.log('图案');
					this.drawPoint[this.drawPoint.length - 1].points[1] = {
						x,
						y
					};
					this.drawall();
					break;
				case 3:
					console.log('橡皮擦');
					this.drawPoint[this.drawPoint.length - 1].points.push({
						x,
						y
					});
					this.eraserDraw(x, y);
					break;
				default:
					break;
			}
		},

		// 离开事件
		touchend(e) {
			console.log('touchend', e);
			const x = e.changedTouches[0].x;
			const y = e.changedTouches[0].y;
			switch (this.canvasStatus) {
				case 0:
					console.log('自由画笔');
					this.drawPoint[this.drawPoint.length - 1].points.push({
						x,
						y
					});
					this.freeDraw(x, y);
					break;
				case 1:
					console.log('文字');
					this.textchangesize = false;
					break;
				case 2:
					console.log('图案');
					switch (this.patternType) {
						case 'circle':
							this.drawCircle(this.startX, this.startY, x, y);
							break;
						case 'rect':
							this.drawRect(this.startX, this.startY, x, y);
							break;
						case 'arrow':
							this.drawArrow(this.startX, this.startY, x, y);
							break;
						case 'bigger':
							this.drawBigger(this.startX, this.startY, x, y);
							break;
						case 'missingrect':
							this.drawMissingRect(this.startX, this.startY, x, y);
							break;
						case 'arc':
							this.drawArc(this.startX, this.startY, x, y);
							break;
					}
					this.ctx.draw(true);
					this.drawPoint[this.drawPoint.length - 1].points[1] = {
						x,
						y
					};
					this.drawall();
					break;
				default:
					console.log('橡皮擦');
					this.drawPoint[this.drawPoint.length - 1].points.push({
						x,
						y
					});
					this.eraserDraw(x, y);
					break;
			}
		},

		// 文字移动事件
		handlemovable(e, index) {
			if (this.textchangesize) {
				return;
			}
			this.textindex = index;

			console.log(this.textchangesize, '移动文字', e);
			this.textData[index].x = e.target.x;
			this.textData[index].y = e.target.y;
		},

		/**
		 * 绘制所有图形
		 */
		drawall() {
			let data = this.drawPoint;
			for (let i = 0; i < data.length; i++) {
				let { shape, lineColor, lineWidth, points } = data[i];

				let startX = points[0].x;
				let startY = points[0].y;
				let endX = points[1] ? points[1].x : 0;
				let endY = points[1] ? points[1].y : 0;

				this.ctx.setStrokeStyle(lineColor);

				if (shape == 'curve') {
					console.log('当前自由画笔的颜色', lineColor);
					this.ctx.setLineWidth(this.freeLineWidth);

					this.ctx.beginPath(); // 开始新的路径
					this.ctx.moveTo(points[0].x, points[0].y);
					for (let k = 0; k < points.length; k++) {
						if (k != 0) {
							this.ctx.lineTo(points[k].x, points[k].y);
						}
					}
					this.ctx.stroke();
					this.ctx.closePath(); // 关闭路径
				}

				if (shape == 'circle') {
					this.ctx.setLineWidth(lineWidth);
					this.drawCircle(startX, startY, endX, endY);
				}
				if (shape == 'rect') {
					this.ctx.setLineWidth(lineWidth);
					this.drawRect(startX, startY, endX, endY);
				}
				if (shape == 'arrow') {
					this.ctx.setLineWidth(lineWidth);
					this.drawArrow(startX, startY, endX, endY);
				}
				if (shape == 'bigger') {
					this.ctx.setLineWidth(lineWidth);
					this.drawBigger(startX, startY, endX, endY);
				}
				if (shape == 'missingrect') {
					this.ctx.setLineWidth(lineWidth);
					this.drawMissingRect(startX, startY, endX, endY);
				}
				if (shape == 'arc') {
					this.ctx.setLineWidth(lineWidth);
					this.drawArc(startX, startY, endX, endY);
				}
			}
			this.ctx.draw(false);
		},

		// 自由画笔
		freeDraw(x, y) {
			this.ctx.moveTo(this.startX, this.startY);
			this.ctx.lineTo(x, y);
			this.ctx.stroke();
			this.startX = x;
			this.startY = y;
		},

		/**
		 * 这里是画空心圆
		 * @param {Object} x
		 * @param {Object} y
		 */
		drawCircle(startX, startY, x, y) {
			let pointLT = {};
			let pointRB = {};
			let center = {};

			pointLT.X = Math.min(startX, x);
			pointLT.Y = Math.min(startY, y);

			pointRB.X = Math.max(startX, x);
			pointRB.Y = Math.max(startY, y);

			center.X = (pointRB.X + pointLT.X) / 2;
			center.Y = (pointRB.Y + pointLT.Y) / 2;

			let dx = pointRB.X - pointLT.X;
			let dy = pointRB.Y - pointLT.Y;
			let r = Math.sqrt(dx * dx + dy * dy) / 2;

			this.ctx.beginPath();
			this.ctx.arc(center.X, center.Y, r, 0, 2 * Math.PI);
			this.ctx.lineWidth = this.lineWidth;
			this.ctx.stroke();
		},

		/**
		 * 画空心矩形
		 * @param {Object} x
		 * @param {Object} y
		 */
		drawRect(startX, startY, x, y) {
			let pointLT = {};
			let pointRB = {};
			let pointRT = {};
			let pointLB = {};
			let center = {};

			pointLT.X = Math.min(startX, x);
			pointLT.Y = Math.min(startY, y);

			pointRB.X = Math.max(startX, x);
			pointRB.Y = Math.max(startY, y);

			pointRT.X = pointRB.X;
			pointRT.Y = pointLT.Y;

			pointLB.X = pointLT.X;
			pointLB.Y = pointRB.Y;

			let width = Math.abs(x - startX);
			let height = Math.abs(y - startY);

			this.ctx.beginPath();
			this.ctx.rect(startX, startY, width, height);
			this.ctx.lineWidth = this.lineWidth;
			this.ctx.stroke();
		},

		/**
		 * 画箭头
		 * @param {Object} x
		 * @param {Object} y
		 * fromX, fromY：起点坐标（也可以换成p1，只不过它是一个数组）
		 * toX, toY：终点坐标 (也可以换成p2，只不过它是一个数组)
		 * theta：三角斜边一直线夹角
		 * headlen：三角斜边长度
		 * width：箭头线宽度
		 * color：箭头颜色
		 */
		drawArrow(startX, startY, toX, toY) {
			let theta = 30;
			let headlen = 10;
			let width = this.lineWidth;
			// 计算各角度和对应的P2,P3坐标
			let angle = (Math.atan2(startY - toY, startX - toX) * 180) / Math.PI,
				angle1 = ((angle + theta) * Math.PI) / 180,
				angle2 = ((angle - theta) * Math.PI) / 180,
				topX = headlen * Math.cos(angle1),
				topY = headlen * Math.sin(angle1),
				botX = headlen * Math.cos(angle2),
				botY = headlen * Math.sin(angle2);
			this.ctx.save();
			this.ctx.beginPath();
			let arrowX = startX - topX,
				arrowY = startY - topY;
			this.ctx.moveTo(arrowX, arrowY);
			this.ctx.moveTo(startX, startY);
			this.ctx.lineTo(toX, toY);
			arrowX = toX + topX;
			arrowY = toY + topY;
			this.ctx.moveTo(arrowX, arrowY);
			this.ctx.lineTo(toX, toY);
			arrowX = toX + botX;
			arrowY = toY + botY;
			this.ctx.lineTo(arrowX, arrowY);
			this.ctx.lineWidth = width;
			this.ctx.stroke();
			this.ctx.restore();
		},

		/**
		 * 大于号
		 * @param {Number} startX
		 * @param {Number} startY
		 * @param {Number} toX
		 * @param {Number} toY
		 */
		drawBigger(startX, startY, toX, toY) {
			let theta = 30;
			let headlen = 10;
			let width = this.lineWidth;
			this.ctx.save();
			this.ctx.beginPath();
			this.ctx.moveTo(startX, startY);
			let p2x = toX;
			let p2y = (toY - startY) / 2 + startY;
			this.ctx.lineTo(p2x, p2y);
			let p3x = startX;
			let p3y = toY;
			this.ctx.lineTo(p3x, p3y);
			this.ctx.lineWidth = width;
			this.ctx.stroke();
			this.ctx.restore();
		},

		/**
		 * 缺少一边的矩形
		 * @param {Number} startX
		 * @param {Number} startY
		 * @param {Number} toX
		 * @param {Number} toY
		 */
		drawMissingRect(startX, startY, toX, toY) {
			this.ctx.save();
			this.ctx.beginPath();
			this.ctx.moveTo(startX, toY);
			this.ctx.lineTo(startX, startY);
			this.ctx.lineTo(toX, startY);
			this.ctx.lineTo(toX, toY);

			this.ctx.lineWidth = this.lineWidth;
			this.ctx.stroke();
			this.ctx.restore();
		},

		/**
		 * 起点为210°，终点为150°的圆弧
		 * @param {Number} startX
		 * @param {Number} startY
		 * @param {Number} toX
		 * @param {Number} toY
		 */
		drawArc(startX, startY, x, y) {
			let pointLT = {};
			let pointRB = {};
			let center = {};

			pointLT.X = Math.min(startX, x);
			pointLT.Y = Math.min(startY, y);

			pointRB.X = Math.max(startX, x);
			pointRB.Y = Math.max(startY, y);

			center.X = (pointRB.X + pointLT.X) / 2;
			center.Y = (pointRB.Y + pointLT.Y) / 2;

			let dx = pointRB.X - pointLT.X;
			let dy = pointRB.Y - pointLT.Y;
			let r = Math.sqrt(dx * dx + dy * dy) / 2;

			this.ctx.beginPath();
			if (startY > y) {
				this.ctx.arc(center.X, center.Y, r, 0.3 * Math.PI, 0.7 * Math.PI);
			} else {
				this.ctx.arc(center.X, center.Y, r, 1.3 * Math.PI, 1.7 * Math.PI);
			}

			this.ctx.lineWidth = this.lineWidth;
			this.ctx.stroke();
			this.ctx.restore();
		},

		// 橡皮擦
		eraserDraw(x, y) {
			const radius = 20;
			const transparency = 0.5;

			console.log('橡皮擦', x, y);
			// 实现橡皮擦效果
			this.ctx.save(); // 保存当前画布状态
			this.ctx.globalCompositeOperation = 'destination-out'; // 设置全局合成操作
			this.ctx.beginPath(); // 开始路径
			this.ctx.arc(x, y, 20, 0, 2 * Math.PI); // 使用圆形擦除器
			this.ctx.fill();
			this.ctx.moveTo(this.startX, this.startY); // 移动到指定坐标
			this.ctx.lineTo(x, y); // 连接到指定坐标
			this.ctx.setLineWidth(20); // 设置线条宽度
			this.ctx.stroke(); // 绘制路径
			this.ctx.restore(); // 恢复画布状态
			this.ctx.draw(true);
			this.startX = x;
			this.starty = y;
		},

		// 恢复上一步
		changeBishuaShow() {
			console.log('恢复上一步', this.drawPoint.length);
			if (this.drawPoint.length > 0) {
				this.drawPoint.pop();
				this.drawall();
			}
		},

		// 切换画笔类型
		changeCanvasType(val) {
			console.log('画笔类型', val);
			this.canvasStatus = val;

			switch (val) {
				case 0:
					this.bishuaShow = !this.bishuaShow;
					this.textStatus = false;
					this.patternStatus = false;
					break;
				case 1:
					this.textStatus = true;
					this.bishuaShow = false;
					this.patternStatus = false;
					break;
				case 2:
					this.patternStatus = true;
					this.bishuaShow = false;
					this.textStatus = false;
					break;

				case 3:
					this.bishuaShow = false;
					this.textStatus = false;
					this.patternStatus = false;
					break;
				default:
					// this.bishuaShow = false;
					// this.textStatus = false;
					// this.patternStatus = false
					break;
			}
		},

		// 改变文字框的大小
		handleChangeText(item, index) {
			console.log('改变文字框的大小', item, index);
			this.textindex = index;
			this.textchangesize = true;
		},

		// 删除文字框
		handleDelText(item, index) {
			console.log('删除文字框', item, index);
			this.textData.splice(index, 1);
		},

		// 选择颜色
		selectColor(item, index) {
			this.colorsData.forEach((item, idx) => (item.active = idx == index));
			// 文字状态时
			if (this.canvasStatus == 1) {
				if (this.textData.length) this.textData[this.textData.length - 1].color = `rgba(${this.lineColor},1)`;
			}
		},

		// 选择笔刷
		selectBishua(item, index) {
			this.bishuaData.forEach((item, idx) => (item.active = idx == index));
			this.bishuaShow = false;
		},

		// 展开、关闭字体列表
		handleFontFace() {
			this.faceStatus = !this.faceStatus;
		},

		// 选择字体
		handleSelectFont(item, index) {
			this.fontfaceData.forEach((item, idx) => (item.active = idx == index));
			this.faceStatus = false;
			if (this.textData.length) {
				this.textData[this.textindex].family = this.fontFamily;
			}
		},

		// 修改字体大小
		sliderChange(e) {
			console.log('切换字体大小', e);
			this.fontsize = e.target.value;
			if (this.textData.length) {
				this.textData[this.textindex].size = this.fontsize;
			}
		},

		// 选择图案
		handlePattern(item, index) {
			this.patternData.forEach((item, idx) => (item.active = idx == index));
			this.patternStatus = false;
		},

		// 完成或取消
		changeCancle(val) {
			console.log('确定、取消', val);
			if (val) {
				if (this.textData.length > 0) {
					const breakTextLines = (text, maxwidth) => {
						let words = text.split('');
						let line = '';
						let lines = [];
						for (let i = 0; i < words.length; i++) {
							let word = words[i];
							let textLine = line + word;
							let metrics = this.ctx.measureText(textLine);
							if (metrics.width > maxwidth && i > 0) {
								lines.push(line);
								line = word;
							} else {
								line = textLine;
							}
						}
						lines.push(line);
						return lines;
					};

					for (let i = 0; i < this.textData.length; i++) {
						const item = this.textData[i];
						console.log('每个字体的数据', item);
						this.ctx.save();

						this.ctx.font = `${item.size}px ${item.family}`;
						this.ctx.fillStyle = item.color;
						let liness = breakTextLines(item.text, item.w);
						for (let k = 0; k < liness.length; k++) {
							this.ctx.fillText(liness[k], item.x, item.y + item.size + k * item.size);
						}
						this.ctx.restore();
					}
					this.ctx.draw(true);
					this.textData = [];
				}

				console.log('画板数据', this.ctx);

				uni.canvasToTempFilePath({
					canvasId: this.canvasId,
					quality: 0.2,
					success: (res) => {
						console.log(res.tempFilePath);
						pathToBase64(res.tempFilePath).then((res1) => {
							// console.log(res1, '转换的base64图片');
							this.endImage(res1);
						});
					}
				});
			} else {
				console.log('取消', this.$refs);
				// 清空画布
				this.ctx.clearRect(0, 0, this.width, this.height);
				this.ctx.draw(true);
				this.$emit('change', '');
			}
		},

		// 最终图片合成
		endImage(img) {
			// 先在ctx1上绘制bgImg,在绘制img
			this.ctx1.drawImage(this.bgImg, 0, 0, this.width, this.height);
			this.ctx1.draw(true);
			this.ctx1.drawImage(img, 0, 0, this.width, this.height);
			this.ctx1.draw(true, () => {
				uni.canvasToTempFilePath({
					canvasId: this.canvasId + '1',
					quality: 0.2,
					success: (res2) => {
						pathToBase64(res2.tempFilePath).then((res11) => {
							console.log(res11, '最终的转换的base64图片');
							// this.bgImg1 = res11;
							this.$emit('change', res11);
						});
					}
				});
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	.group {
		width: 100vw;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		padding-top: var(--status-bar-height);
		padding-bottom: 20rpx;
		background-color: #ffffff;

		.group_1 {
			width: 100vw;
			height: 80rpx;
			padding: 0 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			text {
				font-size: 30rpx;
				font-weight: bold;
				color: #333333;
			}

			.active {
				color: $uni-color-warning;
			}
		}

		.group_2 {
			width: 100vw;
			height: 40rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			view {
				flex: 1;
				width: 0;
				height: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				text {
					font-size: 30rpx;
					font-weight: bold;
					text-shadow: 0rpx 0rpx 2rpx #000;
					color: #ffffff;
				}
			}
		}

		.group_3 {
			width: 100vw;

			.group_3_item {
				width: 100vw;
				display: flex;
				align-items: center;
				justify-content: space-around;

				text {
					display: block;
					width: 40rpx;
					height: 40rpx;
					text-align: center;
					line-height: 40rpx;
					border-radius: 50%;
					background-color: rgba(0, 0, 0, 0.25);
				}

				.active {
					outline: 6rpx solid $uni-color-warning;
				}
			}
		}

		.group_4 {
			width: 100vw;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 10rpx 20rpx 10rpx 20rpx;
			position: relative;

			.group_4_label {
				width: 100rpx;
			}

			.group_4_view,
			slider {
				flex: 1;
				width: 0;
			}

			slider {
				margin: 0 !important;
			}

			.group_4_1 {
				width: 300rpx;
				height: 300rpx;
				overflow-y: auto;
				background-color: #ffffff;
				padding: 20rpx 0;
				position: absolute;
				top: 80rpx;
				left: 100rpx;

				view {
					width: 100%;
					height: 40rpx;
					padding: 0 20rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin: 10rpx 0;
				}
			}
		}

		.group_5 {
			width: 100%;
			padding: 10rpx 20rpx 10rpx 20rpx;
			display: flex;
			justify-content: space-between;

			text {
				color: #333333;
				font-size: 30rpx;
			}

			.active {
				color: $uni-color-warning;
			}
		}
	}

	.group1 {
		width: 100vw;
		height: 100vh;
		// background-color: red;
		position: relative;

		.img {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			z-index: 1;
		}

		.img1 {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			z-index: 2;
		}

		.canvasbox {
			position: absolute;
			top: 0;
			left: 0;
			// background-color: rgba(0, 0, 0, 0.8);
		}

		movable-area {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			z-index: 3;
			// background-color: rgba(0, 0, 0, 0.8);

			.textbox {
				position: absolute;
				z-index: 4;
				padding: 0;
				margin: 0;

				textarea {
					margin: 0;
					padding: 0;
				}

				.close {
					position: absolute;
					top: 0;
					right: 0;
					z-index: 998;
				}

				.tuizhuai {
					position: absolute;
					right: 0;
					bottom: 0;
					z-index: 999;
				}
			}
		}
	}
}
</style>
